<template>
  <div class="app-container">
    <div style="width: 1024px;margin: 0 auto">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="发起参与机构号" prop="sender">
            <el-input v-model="submitParams.sender" :disabled="true"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="发起参与机构名称" prop="senderName">
            <el-input v-model="submitParams.senderName" :disabled="true"/>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="接收参与机构号" prop="recver">
            <el-input v-model="submitParams.recver" @change="checkbankcode('recver')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="20px">
            <el-button
              icon="el-icon-search"
              plain
              type="primary"
              @click="openBankBranchDialog('recver')"
            >
              行名行号查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="接收参与机构名称" prop="recverName">
            <el-input v-model="submitParams.recverName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="汇票号码" prop="dftNo">
            <el-input v-model="submitParams.dftNo" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="汇票密押" prop="dftKey">
            <el-input v-model="submitParams.dftKey" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col  :span="12">
          <el-form-item label="出票日期" prop="dftDate">
            <el-date-picker v-model="submitParams.dftDate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="汇票种类" prop="dftCtgy">
            <el-select
              v-model="submitParams.dftCtgy"
              clearable
              placeholder="汇票种类"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dictMap.DFT_CTGY"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="12">
          <el-form-item label="汇票签发行行号" prop="dftSndBrno">
            <el-input v-model="submitParams.dftSndBrno" @change="checkbankcode('dftSndBrno')"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="20px">
          <el-button
            icon="el-icon-search"
            plain
            type="primary"
            @click="openBankBranchDialog('dftSndBrno')"
          >
            行名行号查询
          </el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="汇票签发行行名" prop="dftSndName">
            <el-input v-model="submitParams.dftSndName" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="24">
          <el-form-item label="汇票收款人名称" prop="dftPayerName">
            <el-input v-model="submitParams.dftPayerName" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="原现金汇票兑付行" prop="dftOriBrno">
            <el-input v-model="submitParams.dftOriBrno" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="出票金额币种" prop="curcd">
            <el-input v-model="submitParams.curcd" :disabled="true"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="出票金额" prop="dftAmount">
            <ht-amount-input
              v-model="submitParams.dftAmount"
              placeholder="出票金额"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="submitParams.remarks" maxlength="256" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :offset="6" :span="24">
          <el-form-item>
            <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="loading">提 交</el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </div>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import HtAmountInput from "@/views/components/HtAmountInput";
import { mapGetters } from "vuex";
import { cityCommercialBankdraftReturnApplyEntrySave } from "@/api/cnaps/hvps/153";
import { milliSendToDate } from "@/utils/common";

export default {
  name: "CityCommercialBankdraftReturnApplyEntry",
  mixins: [listPageMixin],
  components: { HtAmountInput,BankBranchDialog },
  computed: {
    ...mapGetters(["name", "globalBusData"]),
  },
  created() {
    this.$set(this.submitParams,'sender',this.globalBusData.cnapsBrno)
    this.$set(this.submitParams,'senderName',this.globalBusData.cnapsBrname)
    this.$set(this.submitParams,'dftDate',milliSendToDate(new Date()))
  },
  watch:{
    globalBusData: {
      handler(val) {
        this.$set(this.submitParams, "sender", val.cnapsBrno);
        this.$set(this.submitParams, "senderName", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 录入参数
      submitParams: {
        sender:undefined,
        senderName:undefined,
        recver:undefined,
        recverName:undefined,
        dftDate:undefined,
        dftCtgy:undefined,
        dftNo:undefined,
        dftKey:undefined,
        dftSndBrno:undefined,
        dftSndName:undefined,
        dftPayerName:undefined,
        dftOriBrno:undefined,
        curcd:'CNY',
        dftAmount:undefined,
        remarks:undefined,
      },

      loading: false,
      //
      searchFormDictList: ["DFT_CTGY"],

      rules: {
        sender : [ { max: 14, message: "长度最大为14位", trigger: "blur" }],
        senderName : [ { max: 60, message: "长度最大为60位", trigger: "blur" }],
        recver : [ { required: true, message: "请输入接收参与机构号", trigger:  ['blur', 'change']  },{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        recverName : [ { max: 60, message: "长度最大为60位", trigger: "blur" }],
        dftDate :  [ { required: true, message: "请输入出票日期", trigger: "blur" }],
        dftCtgy :  [ { required: true, message: "请输入汇票种类", trigger: "blur" }],
        dftNo : [ { required: true, message: "请输入汇票号码", trigger: "blur" },{ max: 32, message: "长度最大为32位", trigger: "blur" }],
        dftKey : [ { required: true, message: "请输入汇票密押", trigger: "blur" },{ max: 10, message: "长度最大为10位", trigger: "blur" }],
        dftSndBrno : [ { required: true, message: "请输入汇票签发行行号", trigger: ['blur', 'change'] },{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        dftSndName : [ { required: true, message: "请输入汇票签发行行名", trigger: "blur" },{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        dftPayerName : [ { max: 60, message: "长度最大为60位", trigger: "blur" }],
        dftOriBrno : [ { required: true, message: "请输入原现金汇票兑付行", trigger: ['blur', 'change'] },{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        curcd : [ { max: 3, message: "长度最大为3位", trigger: "blur" }],
        dftAmount :  [ { required: true, message: "请输入出票金额", trigger: "blur" }],
        remarks : [ { max: 256, message: "长度最大为256位", trigger: "blur" }],


      },
    };
  },
  mounted() {},
  methods: {

    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          cityCommercialBankdraftReturnApplyEntrySave(this.submitParams)
            .then((response) => {
              this.msgSuccess("录入成功");
              this.refresh();
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      console.log(this.globalBusData)
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      if (fromFlag === "recver") {
        this.$set(this.submitParams, "recver", row.bankCode);
        this.$set(this.submitParams, "recverName", row.orgFullname);
      }else if (fromFlag === "dftSndBrno") {
        this.$set(this.submitParams, "dftSndBrno", row.bankCode);
        this.$set(this.submitParams, "dftSndName", row.orgFullname);
      }
    },

    checkbankcode(fromFlag) {
      if (fromFlag === "recver") {
        let recver = this.submitParams.recver;
        getBankInfByBankCode(recver)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "recver", response.result.bankCode);
              this.$set(this.submitParams, "recverName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "recver", null);
              this.$set(this.submitParams, "recverName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "recver", null);
            this.$set(this.submitParams, "recverName", null);
          });
      } else if (fromFlag === "dftSndBrno") {
        let dftSndBrno = this.submitParams.dftSndBrno;
        getBankInfByBankCode(dftSndBrno)
          .then((response) => {
            if (response.code == "S" && response.result !== null && response.result !== undefined) {
              this.$set(this.submitParams, "dftSndBrno", response.result.bankCode);
              this.$set(this.submitParams, "dftSndName", response.result.orgFullname);
            } else {
              this.msgError("无行名行号记录");
              this.$set(this.submitParams, "dftSndBrno", null);
              this.$set(this.submitParams, "dftSndName", null);
            }
          })
          .catch((err) => {
            this.$set(this.submitParams, "dftSndBrno", null);
            this.$set(this.submitParams, "dftSndName", null);
          });
      }
    },


  },
};
</script>
